<template>
  <div >
    <el-pagination  @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="searchForm.page_num"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="searchForm.page_limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="searchForm.total">
    </el-pagination>
  </div>
</template>
<script>
  import pageCuter from '../../utils/pageCuter'
  export default {
    name: 'rf-pagination',
    props: {
      list: {
        type: Array
      },
      source: {
        type: Array
      }
    },
    data () {
      return {
        searchForm: {
          total_page: 0,
          total: 0,
          page_num: 1,
          page_limit: 10
        },
        listData: this.list
      }
    },
    watch: {
      source (newValue) {
        this.searchForm = pageCuter.buildPageDatas(newValue, 10)
        this.listData = this.searchForm.pageArrDatas[0]
        this.$emit('update:list', this.listData)
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.searchForm = pageCuter.buildPageDatas(this.source, 10)
        this.listData = this.searchForm.pageArrDatas[0]
        this.$emit('update:list', this.listData)
      },
      // 每页数
      sizeChangeHandle (val) {
        this.searchForm = pageCuter.buildPageDatas(this.source, val)
        this.listData = this.searchForm.pageArrDatas[0]
        this.searchForm.page_limit = val
        this.searchForm.page_num = 1
        this.$emit('update:list', this.listData)
      },
      // 当前页
      currentChangeHandle (val) {
        this.listData = pageCuter.changePage(this.searchForm, val)
        this.searchForm.page_num = val
        this.$emit('update:list', this.listData)
      },
      // 获取列表
      getDataList () {
        this.$emit('change')
      }
    }
  }
</script>

